import { ModalForm, ProForm, StepsForm } from '@ant-design/pro-components';
// @ts-ignore
import { Button, Image } from 'antd';
// @ts-ignore
import { getItemById } from '@/services/ant-design-pro/api';
import React, { useEffect, useState } from 'react';
import './OrderProductBox.less';
interface IProps {
  orderLines: [
    {
      itemId: string;
      quantity: number;
    },
  ];
}

const OrderProductBox: React.FC<IProps> = ({ orderLines }) => {
  const [imgUrlList, setList] = useState<string[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const getImgUrl = async () => {
    for (let i = 0; i < orderLines.length; i++) {
      try {
        const res = await getItemById(orderLines[i].itemId);
        if (res.data) {
          let tempList = imgUrlList;
          tempList.push(res.data.imgUrl);
          setList(tempList);
        }
      } catch (e) {
        console.log(e);
      }
    }
  };
  useEffect(() => {
    getImgUrl().then(() => {
      setIsLoading(false);
    });
  }, []);

  const Components = {
    ProForm,
    ModalForm,
    StepsForm,
  };
  const [type] = useState<keyof typeof Components>('ModalForm');
  const FormComponents = Components[type as 'ModalForm'];

  return (
    <>
      {isLoading ? (
        <p>正在加载...</p>
      ) : (
        <FormComponents
          // @ts-ignore
          labelWidth="auto"
          title="缩略图"
          trigger={<Button type="primary">简略信息</Button>}
          style={{
            overflow: 'hidden',
          }}
        >
          <div
            style={{
              width: '200px',
              margin: '30px',
            }}
          >
            {imgUrlList.map((url, index) => (
              <div className={'petImg'} key={index}>
                <Image src={url}></Image>
              </div>
            ))}
          </div>
        </FormComponents>
      )}
    </>
  );
};
export default OrderProductBox;
